<!DOCTYPE html>
<html class="x-admin-sm">

{include file="common/static" /}
{include file="common/resources" /}

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card" id="app">

                        <div class="layui-container">
                            <div class="layui-row">
                                <div class="layui-col-md4">


                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend id="room_num">房间号：{$room.room_num}</legend>
                                        <div class="layui-field-box">
                                            <input type="hidden" id="room_id" value="{$room.id}">
                                            <table class="layui-table">
                                                <tbody>
                                                <tr>
                                                    <td>类型:</td>
                                                    <td>{$room.type_name}</td>
                                                </tr>
                                                <tr>
                                                    <td>价格</td>
                                                    <td>{$room.monday}</td>
                                                </tr>
                                                <tr>
                                                    <td>押金</td>
                                                    <td>{$room.deposit}</td>
                                                </tr>
                                                </tbody>
                                            </table>

                                        </div>
                                    </fieldset>

                                    <fieldset class="layui-elem-field layui-field-title" v-show='id'>
                                        <legend id="room_num">房间号：{{room_num}}</legend>
                                        <div class="layui-field-box">
                                            <input type="hidden" id="room_id" value="{$room.id}">
                                            <table class="layui-table">
                                                <tbody>
                                                <tr>
                                                    <td>类型:</td>
                                                    <td>{{type_name}}</td>
                                                </tr>
                                                <tr>
                                                    <td>价格</td>
                                                    <td>{{monday}}</td>
                                                </tr>
                                                <tr>
                                                    <td>押金</td>
                                                    <td>{{deposit}}</td>
                                                </tr>
                                                </tbody>
                                            </table>

                                        </div>
                                    </fieldset>

                                </div>
                                <div class="layui-col-md7" style="margin-left: 50px;">
                                    {volist name="list" id="vo"}

                                        <button type="button"class="layui-btn layui-btn-lg layui-btn-normal"
                                                style="margin: 10px;"
                                                @click="replace({$vo.id},{$vo.room_num},'{$vo.type_name}',{$vo.monday},{$vo.deposit})">
                                            {$vo.room_num}
                                        </button>
                                    {/volist}
                                </div>
                            </div>

                            <button type="button" class="layui-btn layui-btn-lg" @click="updates()">
                                确定换房
                            </button>
                        </div>



                    </div>
                </div>
            </div>
        </div>
    </body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new 	Vue({
        el:'#app',
        data:{
            id:false,
            room_num:'',
            type_name:"",
            monday:'',
            deposit:'',
        },
        methods:{
            replace:function(id,num,type_name,monday,deposit){
                this.room_num = num;
                this.type_name = type_name;
                this.monday = monday;
                this.deposit = deposit;
                this.id = id;
            },
            updates:function () {
                $.ajax({
                    type:"post",
                    url: "{:url('home/atrial/replace_room')}",
                    data: {
                        room_num:this.room_num,
                        room_id:$('#room_id').val(),
                        replace_id:this.id
                    },
                    success: function(data){
                        console.log(data);
                        toastr.error(data.msg);
                        if(data.code == 100){
                            setTimeout(function () {
                                layer.closeAll();
                                parent.location.reload();
                            },500);
                        }
                    }});
            }
        }
    })
</script>


</html>